<template>
    <a-form :model="form" ref="formRef" :rules="formRules" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
        <a-form-item :label="$t('main.oldPassword')" name="oldPassword">
            <a-input v-model:value="form.oldPassword" :maxlength="50" type="password" />
        </a-form-item>
        <a-form-item :label="$t('main.newPassword')" name="newPassword">
            <a-input v-model:value="form.newPassword" :maxlength="50" type="password" />
        </a-form-item>
        <a-form-item :label="$t('main.confirmPassword')" name="confirmPassword">
            <a-input v-model:value="form.confirmPassword" :maxlength="50" type="password" />
        </a-form-item>
    </a-form>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import { ChangePasswordDto } from '@/models/user';
import type { FormInstance } from 'ant-design-vue';
import { reactive, ref, type Ref } from 'vue';
import { getMd5Suffix } from '@/utils';
import type { Rule } from 'ant-design-vue/lib/form';
import { changePasswordApi } from '@/services/main';

defineExpose({ ok });

const form: ChangePasswordDto = reactive<ChangePasswordDto>(new ChangePasswordDto);
const formRef: Ref<FormInstance | undefined> = ref<FormInstance>();
const formRules: Record<string, Rule[]> = {
    oldPassword: [
        {
            validator: checkPassword,
            trigger: 'blur',
        },
    ],
    newPassword: [
        {
            validator: checkPassword,
            trigger: 'blur',
        },
    ],
    confirmPassword: [
        {
            validator: checkConfirmPassword,
            trigger: 'blur',
        },
    ]
}

/**
 * 密码格式校验
 * @param rule 
 * @param value 
 * @param callback 
 */
function checkPassword(rule: Rule, value: string, callback: Function): Promise<void> {
    if (!value) {
        return Promise.reject(i18n.global.t('main.required.password'));
    }
    const reg: RegExp = /^[a-zA-Z0-9]{6,12}$/;
    if (!reg.test(value)) {
        return Promise.reject(i18n.global.t('main.required.formattedPassword'));
    }
    return Promise.resolve();
}

/**
 * 新旧密码校验
 * @param rule 
 * @param value 
 * @param callback 
 */
function checkConfirmPassword(rule: Rule, value: string, callback: Function): Promise<void> {
    if (!value) {
        return Promise.reject(i18n.global.t('main.required.password'));
    }
    const reg: RegExp = /^[a-zA-Z0-9]{6,12}$/;
    if (!reg.test(value)) {
        return Promise.reject(i18n.global.t('main.required.formattedPassword'));
    }
    if (form.newPassword !== form.confirmPassword) {
        return Promise.reject(i18n.global.t('main.required.different'));
    }
    return Promise.resolve();
}

async function ok(): Promise<boolean> {
    try {
        await formRef.value?.validate();
        await changePasswordApi({
            oldPassword: getMd5Suffix(form.oldPassword),
            newPassword: getMd5Suffix(form.newPassword),
            confirmPassword: getMd5Suffix(form.confirmPassword)
        });
        return true;
    } catch {
        return false;
    }
}
</script>